<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="echarts" :prop="options" :change:prop="radarChart.updateEcharts" id="radarChart">
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: {
					radar: {
						indicator: [{
								name: '收益期望',
								max: 100
							},
							{
								name: '风险承受',
								max: 100
							},
							{
								name: '投资经验',
								max: 100
							},
							{
								name: '流动性需求',
								max: 100
							},
							{
								name: '投资期限',
								max: 100
							}
						],
						radius: '65%'
					},
					series: [{
						type: 'radar',
						data: [{
							value: this.getRiskFeatureData(this.riskPreference?.riskLevel),
							name: '风险特征',
							areaStyle: {
								opacity: 0.2
							}
						}]
					}]
				}
			}
		},
		props: ['riskPreference'],
		methods: {
			getRiskFeatureData(riskLevel) {
				const featureMap = {
					'保守型': [30, 20, 40, 90, 80],
					'稳健型': [50, 40, 60, 70, 70],
					'平衡型': [60, 60, 70, 60, 60],
					'进取型': [80, 70, 80, 40, 50],
					'激进型': [90, 90, 85, 30, 40]
				}
				return featureMap[riskLevel] || [0, 0, 0, 0, 0]
			}
		}
	}
</script>

<script module="radarChart" lang="renderjs">
	import * as echarts from 'echarts';
	export default {
		mounted() {
			let that = this;
			// 通过nextTick异步画图
			this.$nextTick(() => {
				that.initEcharts()
			});
		},
		methods: {
			initEcharts() {
				this.myChart = echarts.init(document.getElementById('radarChart'))
				this.myChart.setOption(this.options);
				window.addEventListener('resize', () => {
					this.myChart.resize()
				});
			},
			// 监听配置数据变化，并重新渲染
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				if (this.myChart) {
					this.myChart.setOption(newValue);
				}
			},
		},
	}
</script>

<style scoped>
	.echarts {
		width: 100%;
		height: 500rpx;
	}
</style>